<template>
  <div class="relative inline" :style="{width: '800px', height: '500px'}">
    <div v-if="$Browser().trident"  :style="{width:'800px', height: '500px'}">
      <div v-if="instantOcx">
        <a :href="`${this.$site.libServer}/OCX-OpenAPI.exe`" class="ocxDownload">点击此处下载视频插件</a>
      </div>
      <object classid="clsid:863E7B58-A280-40A5-8394-CE33F4E7B654" id="spb" ref="spb"   width="100%" :style="{height: '460px'}" >
        <param name="wmode" value="opaque">
      </object>
    </div>
    <div v-else class="video-no">请使用ie浏览器</div>
  </div>
</template>

<script>
  import mixin from './mixin'
  export default {
    name: "zz_backvideo",
    mixins: [mixin],
    data () {
      return {
        xml: '',
        instantOcx: true
      }
    },
    methods: {
      getXML (xml) {
        this.xml = xml
        if (this.$Browser().trident) {
          this.InitSpb()
        }
      },
      // 初始化方法
      InitSpb () {
        let ocxObj = document.getElementById("spb");
        let languageType = 1;
        let ret = ocxObj.MPB_Init(languageType);
        if (ret !== 0) {
          this.$message.error("初始化失败");
        } else {
          this.instantOcx = false
          this.SetLocalParam()
        }
      },
      // 销毁回放窗口方法
      UninitSpb () {
        let ocxObj = document.getElementById("spb");
        let ret = ocxObj.MPB_Uninit();
        if (ret !== 0) {
          this.$message.error("反初始化失败");
        }
      },
      // 设置本地参数方法
      SetLocalParam () {
        let ocxObj = document.getElementById("spb");
        let xml = '<?xml version="1.0" encoding="UTF-8"?> ' +
          '<localParam> ' +
          '<picType>1</picType> ' +
          '<capturePath>C:Hikvision</capturePath> ' +
          '<recordSize>2</recordSize> ' +
          '<recordPath>C:Hikvision</recordPath> ' +
          '<showMsgTip>1</showMsgTip> ' +
          '</localParam>';
        let ret = ocxObj.MPB_SetLocalParam(xml);
        if (ret !== 0) {
          this.$message.error("设置本地参数失败");
        } else {
          // this.SetToolBar()
          // this.SetWnd()
          this.startPlay()
        }
      },
      // 设置工具栏方法
      SetToolBar () {
        let ocxObj = document.getElementById("spb");
        var ret = ocxObj.MPB_SetToolBar();
        if (ret !== 0){
          this.$message.error("设置工具条失败！");
        }
      },
      // 开始回放
      startPlay () {
        let startTime = this.$moment(new Date().getTime()).format('YYYY-MM-DD') + ' 00:00:00'
        let endTime = this.$moment(new Date().getTime()).format('YYYY-MM-DD HH:mm:ss')
        let spbOcx = document.getElementById("spb");
        let xml = this.xml
        let ret = spbOcx.MPB_StartPlayBack(xml, startTime, endTime);
        if (ret !== 0) {
          this.$message.error("多路回放失败：" + xml);
        } else {
          this.SetWnd()
        }
      },
      // 设置分屏
      SetWnd () {
        let ocxObj = document.getElementById("spb");
        var ret = ocxObj.MPB_SetPlayWndCount(1);
        if (ret !== 0){
          this.$message.error("设置分屏失败！");
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .video-no{
    color: #333;
    text-align: center;
  }
  .ocxDownload {
    &:hover{
      color: red;
      text-decoration: underline;
    }
  }
</style>
